import React, { useEffect, useState } from 'react'
import { useNavigate } from "react-router-dom"
import { NavBar, Tabs, PullRefresh, Toast } from 'react-vant';
import "./myscss/Gpage1.scss"
import axios from "axios"
axios.defaults.baseURL = "http://localhost:3000"
export default function Page1() {
    const navigate = useNavigate()
    let [arr, setArr] = useState(['待就诊', '已结束'])

    let [Ghyylist, setGhyylist] = useState([])

    let [ceckIndex, setCeckIndex] = useState(0)
    const onRefresh = showToast => {
        return new Promise(resolve => {
            setTimeout(() => {
                if (showToast) {
                    Toast.info('刷新成功')
                }
                resolve(true)
            }, 1000)
        })
    }

    let getAllGhyy = async () => {
        let { data: { data } } = await axios.get("/getGhyy")
        if (ceckIndex === 0) {
            data = data.filter(item => item.isflag === 0)
        } else {
            data = data.filter(item => item.isflag !== 0)
        }
        setGhyylist(data)
    }

    useEffect(() => {
        getAllGhyy()
    }, [ceckIndex])

    return (
        <div id='Gpage1'>
            <div className='top1'>
                <NavBar
                    leftText="挂号预约"
                    onClickLeft={() => navigate('/home')}
                />
            </div>
            <div className='mtop'>
                {arr.map((item, index) => (
                    <div key={index} className={ceckIndex === index ? 'box nwebox' : 'box'} onClick={() => { setCeckIndex(index) }}>
                        {arr[index]}
                    </div>
                ))}
            </div>
            <div className='demo-pull-refresh'>
                <Tabs>
                    <Tabs.TabPane>
                        <PullRefresh
                            onRefresh={() => onRefresh(true)}
                            onRefreshEnd={() => console.log('刷新成功')}>
                            {Ghyylist.map(item => (
                                <div className='minbox' key={item._id}>
                                    <p className='txt1'>普通门诊 <span>普通号</span> <span>￥{item.price}</span></p>
                                    <p className='txt2'>门诊时间：2024-9-5<span>周一</span><span>上午</span></p>
                                    <p className='txt3'>患者：{item.name} ({item.sex}，{item.age}岁)</p>
                                    <p className='txt4'>初/复诊：{item.status ? "初" : "复"}诊</p>
                                    {/* <p className='txt5'>{item.isflag}</p> */}
                                    {item.isflag === 0 && <p className='txt5'>待就诊</p>}
                                    {item.isflag === 1 && <p className='txt5'>已结束</p>}
                                    {item.isflag === 2 && <p className=' newtxt5'><span>已取消</span></p>}
                                </div>
                            ))}
                            <div className='botm'>没有更多了</div>
                        </PullRefresh>
                    </Tabs.TabPane>
                </Tabs>
            </div>


        </div>
    )
}
